<template>
	<view>

		<view class="worksiteJoin_box">
			<view class="worksiteJoin_con">
				<view class="joinTit">邀请您加入</view>
				<view class="projectName">“{{worksiteDetail.name}}”</view>
				<view class="joinDesc">实时查看带班记工，记账数据</view>
				<view class="joinList_con">
					<view class="joinItem">线上记工的好处: </view>
					<view class="joinItem">1、每天只需要操作几分钟 </view>
					<view class="joinItem">2、工地数据实时查看，发现误差及时处理</view>
					<view class="joinItem">3、及时对工签字，防止结算时产生纠纷</view>
					<view class="joinItem">4、数据报表自动生成，方便结算。</view>
				</view>
				<view class="joinLogo_con">
					<view class="logoIcon">
						<image src="/static/logo2.png" mode=""></image>
					</view>
					<view class="logoCon">
						<view class="logoName">记工本</view>
						<view class="logoDesc">记工记账，简单易用，数据永久保存</view>
					</view>
				</view>
			</view>
			
			<!-- 底部按钮 -->
			<view class="workerPost_con" v-if="shareType==1">
				<!-- 已有工人信息 -->
				<view class="joinBtn" v-if="userInfo.header_img" @click="oldJoin">立即加入</view>
				<!-- 新用户 -->
				<view class="joinBtn" v-else @click="newJoin">立即加入</view>
			</view>
			<view class="workerPost_con" v-if="shareType==2">
				<view class="joinBtn" @click="addAdmin">接受邀请 成为工地带班</view>
			</view>
			<view class="workerPost_con" v-if="shareType==3">
				<view class="joinBtn" @click="addBoss">加入工地 成为老板</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 工地
				project_id: '',
				worksiteDetail: {},

				// 用户信息
				userInfo: {},
				shareType: 1,
				memberInfo: {}, //工人是否添加到工地，添加到工地的基本信息
			}
		},
		onLoad(option) {
			// uni.showLoading({
			// 	title: '加载中'
			// });
			console.log(option);
			var _this = this;
			_this.project_id = option.project_id;
			_this.shareType = option.type
		},
		onShow() {

		},
		async onReady() {
			var _this = this;
			await _this.$onLaunched;
			_this.getWorksiteDetail();
			_this.getUserInfo();
		},
		methods: {
			// 返回首页
			customBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},

			// 获取工地详情
			getWorksiteDetail() {
				var _this = this;
				_this.$u.get('/api/project.index/getDetail', {
					id: _this.project_id,
				}).then(res => {
					uni.hideLoading();
					console.log("==获取工地详情==");
					console.log(res);
					_this.worksiteDetail = res.data;
					_this.memberInfo = res.data.memberInfo;
				}).catch(res => {
					console.log(res);
				})
			},

			// 获取用户信息
			getUserInfo() {
				var _this = this;
				_this.$u.get('/api/user.index/getDetail', {}).then(res => {
					uni.hideLoading();
					console.log("==获取用户信息==");
					console.log(res);
					_this.userInfo = res.data;
				}).catch(res => {
					console.log(res);
				})
			},

			// 加入工地-带班
			addBoss() {
				var _this = this;
				if (_this.memberInfo) {
					uni.showModal({
						content: '您已经加入该项目',
						showCancel: false,
						success(res) {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					})
					return
				}
				_this.$u.post('/api/project.member/addBoss', {
					project_id: _this.project_id,
					quit: 0,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			// 加入工地-带班
			addAdmin() {
				var _this = this;
				_this.$u.post('/api/project.member/addAdmin', {
					project_id: _this.project_id,
					quit: 0,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			// 加入工地-老用户
			oldJoin() {
				var _this = this;
				if (_this.memberInfo) {
					console.log(_this.memberInfo)
					uni.showModal({
						content: '您已经加入该项目',
						showCancel: false,
						success(res) {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					})
					return
				}
				console.log('生气加入2')
				_this.$u.post('/api/project.member/addApply', {
					project_id: _this.project_id,
					work_class: _this.userInfo.profession,
					name: _this.userInfo.name,
					mobile: _this.userInfo.mobile,
					img: _this.userInfo.header_img,
					quit: 10,
				}).then(res => {
					console.log(res);
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					setTimeout(function() {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 2000)
				}).catch(res => {
					console.log(res);
				})
			},

			// 加入工地-新用户
			newJoin() {
				
				var _this=this;
				if (this.memberInfo) {
					uni.showModal({
						content: '您已经加入该项目',
						showCancel: false,
						success(res) {
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					})
					return
				}
				
				console.log('生气加入1')
				
				uni.navigateTo({
					url: "/pages/worker/workerExtra?project_id=" + this.project_id
				})
			},

		}
	}
</script>

<style>
	page {
		background: url('https://jg.vjigong.com/uploads/worksiteJoin_bg.jpg') no-repeat center center;
		background-size: cover;
	}
</style>
<style scoped lang="scss">
	.worksiteJoin_box {
		width: 100%;
		height: 100vh;
		position: relative;
	}
	
	.worksiteJoin_con{
		width: 660rpx;
		height: 921rpx;
		text-align: center;
		background: url('/static/project/joinBox.png') no-repeat center center;
		background-size: cover;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		top: 80rpx;
		z-index: 99;
		margin: 0 auto;
	}

	.joinTit {
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
		overflow: hidden;
		margin-top: 140rpx;
	}
	
	.projectName{
		font-size: 36rpx;
		font-weight: bold;
		color: $uni-color;
		overflow: hidden;
		margin-top: 30rpx;
	}
	
	.joinDesc{
		font-size: 24rpx;
		color: $uni-color-text;
		margin-top: 30rpx;
	}
	
	.joinList_con{
		padding-left: 75rpx;
		overflow: hidden;
		margin-top: 80rpx;
	}
	
	.joinItem{
		font-size: 24rpx;
		color: $uni-color-text;
		text-align: left;
		margin-top: 10rpx;
	}
	
	.joinLogo_con{
		padding-left: 75rpx;
		overflow: hidden;
		margin-top: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.logoIcon{
		width: 100rpx;
		height: 100rpx;
	}
	
	.logoIcon image{
		width: 100%;
		height: 100%;
	}
	
	.logoCon{
		flex: 2;
		text-align: left;
		margin-left: 20rpx;
	}
	
	.logoName{
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color;
	}
	
	.logoDesc{
		font-size: 24rpx;
		color: $uni-color-text;
		margin-top: 10rpx;
	}

	// 底部按钮
	.workerPost_con {
		padding-top: 200rpx;
		overflow: hidden;
	}

	.joinBtn {
		width: 630rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: $uni-color-active;
		background: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		position: absolute;
		left: 0;
		right: 0;
		bottom: 30rpx;
		z-index: 99;
		margin: 0 auto;
	}
</style>
